<template>
  <Drawer :visible="props.showModal" title="绑定冻存盒" width="600" :closable="false">
    <template #title>
      <div class="title-header">{{ `绑定冻存盒` }}</div>
    </template>

    <template #extra> <CloseOutlined @click="modalCancelFn" /></template>

    <Form ref="formRef" :model="state.data" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="编号" required>
        <Select
          v-model:value="state.data.epcId"
          show-search
          :default-active-first-option="false"
          :filter-option="false"
          :not-found-content="null"
          :options="state.searchData"
          :fieldNames="{
            label: 'serial',
            value: 'id',
          }"
          @search="handleSearch"
          @select="handleSelect"
        />
      </a-form-item>

      <a-form-item label="冻存盒名称">
        <Input :disabled="true" v-model:value="state.data.boxIdName" />
      </a-form-item>

      <a-form-item label="类型">
        <Input :disabled="true" v-model:value="state.data.boxIdName" />
      </a-form-item>

      <a-form-item label="容量">
        <Row>
          <Col :span="3">
            <Input :disabled="true" v-model:value="state.data.rows" />
          </Col>
          <Col :span="3">
            <div style="text-align: center; line-height: 30px">×</div>
          </Col>
          <Col :span="3">
            <Input :disabled="true" v-model:value="state.data.cols" />
          </Col>
        </Row>
      </a-form-item>

      <!--      <a-form-item label="课题组">-->
      <!--        <Input :disabled="true" v-model:value="state.data" />-->
      <!--      </a-form-item>-->

      <!--      <a-form-item label="条码">-->
      <!--        <Input :disabled="true" v-model:value="state.data.password" />-->
      <!--      </a-form-item>-->

      <a-form-item label="EPC">
        <Input :disabled="true" v-model:value="state.data.epc" />
      </a-form-item>
    </Form>
    <template #footer>
      <div style="display: flex; justify-content: center">
        <Button style="margin-right: 50px" @click="modalCancelFn">取消</Button>
        <Button type="primary" @click="modalOkFn">绑定</Button>
      </div>
    </template>
  </Drawer>
</template>

<script setup lang="ts">
import { message, Form, Input, Row, Col, Drawer, Select } from 'ant-design-vue';
import { inject, reactive, ref } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import { bindBox, getBoxInfo, getUnBindBox } from '@/modules/underlying-data/api/storage-managment';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal?: boolean;
    data: any;
  }>(),
  {
    showModal: false,
  },
);

const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'editModalOk'): void;
}>();
const boxTypeList = inject('boxTypeList');
const formRef = ref();

/**
 * data
 */
const state: {
  data: any;
  searchData: any[];
} = reactive({
  data: {},
  searchData: [],
});
const rules = {
  username: [{ required: true, message: '数据必填!' }],
  name: [{ required: true, message: '数据必填!' }],
  roleIds: [{ required: true, message: '数据必填!' }],
};

/**
 * modal
 */
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return;
  }
  let params = {
    epcId: state.data?.id, //盒id
    storageId: props.data?.storageId, //绑定储位id
  };
  await bindBox(params);
  message.success('操作成功！');
  emits('editModalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.clearValidate();
  state.data = {};
  state.data.epcId = '';
  state.searchData = [];
  emits('update:showModal', false);
};
/**
 * search
 */
const handleSearch = async (val: string) => {
  if (!val) {
    state.searchData = [];
    return;
  }
  const res = await getUnBindBox(val);
  state.searchData = res.result;
};
const handleSelect = async (value, option) => {
  state.data = option;
  const { result } = await getBoxInfo(option.boxId);
  state.data.rows = result.rows;
  state.data.cols = result.cols;
  state.data.boxIdName = boxTypeList.value?.find((item) => item?.value === state.data.boxId)?.label;
};
</script>

<style scoped lang="less"></style>
